<template>
  <div>
    <nav-bar>
      <template v-slot:default>新用户注册</template>
    </nav-bar>
    <div style="margin-top: 50px;">
      <div style="text-align: center; padding-top: 50px">
        <van-image width="10rem"
                   height="5rem"
                   fit="contain"
                   src="https://cdn2.lmonkey.com/94f152aaa94d937ccf5de78f3fcac59f/3b6e32e7bc8145a283431f260c3c1d1a.png"
        />
      </div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="name"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写用昵称' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="password_confirmation"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ validator, message: '两次密码不一致' }]"
        />
        <van-field
            v-model="email"
            name="电子邮箱"
            label="电子邮箱"
            placeholder="电子邮箱"
            :rules="[{ pattern,message: '请填写正确电子邮箱' }]"
        />
        <div style="margin: 16px;">
          <div class="link-login" @click="$router.push({path:'/login'})">
<!--            <router-link to="/login">已有账号，立即登录</router-link>-->
            已有账号，立即登录
          </div>
          <van-button round block color="var(--color-high-text)" type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import {defineComponent, reactive, ref, toRefs} from 'vue'
import NavBar from '../../components/common/navbar/NavBar'
import {register} from "../../network/user";
import {Toast} from "vant";
import {useRouter} from "vue-router";

export default defineComponent({
  name: 'Register',
  components: {
    NavBar
  },
  setup() {
    // 邮箱正则表达式
    const pattern = ref(/^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)
    const userinfo = reactive({
      name: '',
      password: '',
      password_confirmation: '',
      email: ''
    })
    const router = useRouter()
    // 密码验证
    const validator = () => {
      return userinfo.password === userinfo.password_confirmation
    }

    // 注册提交
    const onSubmit = () => {
      // Notify({ type: 'success', message: '通过验证' });

      // 注册
      register(userinfo).then(res => {
        if (res.status === 201) {
          Toast.success('注册成功')
          setTimeout(() => {
            router.push({path: '/login'})
          }, 1000)
        }
      })
    }

    return {
      pattern,
      validator,
      ...toRefs(userinfo),
      onSubmit
    }
  }
})
</script>

<style lang="scss" scoped>
.link-login{
  font-size: 14px;
  margin-bottom: 20px;
  color: var(--color-high-text);
  display: inline-block;
  text-align: center;
}
</style>